<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>

</head>

<body>
    <div id="app">
        <h2>{{title}}</h2>
        <hr>
        <my-head></my-head>
        <!-- 5.路由出口  专门用于渲染组件 -->
        <router-view class="box"></router-view>

        <!-- 6.路由导航 -->
        <p>
            <a href="#/home">首页1</a>
            <router-link to="/home">首页2</router-link>
            <router-link to="/news">新闻</router-link>
            <router-link to="/find">发现</router-link>
            <router-link to="/mine">个人中心</router-link>
        </p>

    </div>

    <template id="myhead">
        <div>
            <h2>这是header</h2>
        </div>
    </template>

    <template id="home">
        <div>
            <h2>Home--首页</h2>
        </div>
    </template>

    <template id="mine">
        <div>
            <h2>Mine--个人中心</h2>
        </div>
    </template>

    <template id="news">
        <div>
            <h2>News--新闻</h2>
        </div>
    </template>

    <template id="find">
        <div>
            <h2>Find--发现</h2>
        </div>
    </template>

    <script>

        //组件
        Vue.component('MyHead', {
            template: '#myhead'
        })
        //0.如果使用模块化机制边城，导入Vue和VueRouter，要调用Vue.use(VueRouter)

        //1.定义（路由）组件.（组件选项）
        const Home = {
            template: '#home'
        }
        const Mine = {
            template: '#mine'
        }
        const News = {
            template: '#news'
        }
        const Find = {
            template: '#find'
        }

        //2.定义路由配置规则（path && Component）
        //<component :is='cptname'></component>
        const routes =[
            {
                path:'/',
                redirect:'/news'//重定向
            },
            {
                path:'/home',
                component:Home,
            },
            {
                path:'/news',
                component:News,
            },
            {
                path:'/find',
                component:Find,
            },
            {
                path:'/mine',
                component:Mine,
            },
        ]

        //3.创建路由对象
        const router =new VueRouter({
            routes:routes
        })



        const vm = new Vue({
            //4.挂载到根实例
            router,//this.$router 全局变量

            el: "#app",
            data: {
                title: "路由初步学习 ",
            },
            mounted() {
                document.getElementsByTagName('title')[0].innerHTML = this.title;

                console.log(this.$router)   // 全局路由对象   用于实现路由守卫 路由跳转和路由切换 
                console.log(this.$route)  //  当前激活的路由对象信息数据  获取路由参数 获取路由信息 
            }
        })
    </script>

</body>

<!-- 
        node 路由 根据不同的url接口 返回对应的不同的数据或者页面  (Later)
        Vue 路由 router 根据不同的url路径 pathname  匹配路由里面的 path 匹配成功就加载对应的组件(component)
        
        Vue-Router 是 Vue.js 官方的路由管理器。
        它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌
        
        路由作用 实现构建单页面应用  index.html 其他页面 组件形式加载
        single-page-application     (SPA)     

        将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们

        a. 掌握 配置最基本的路由 流程
        b. 路由传递参数  动态路由
        c. 嵌套路由
     -->

</html>